<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="conent-top">
			<div class="download"></div>
			<div class="download-title">
				<img  src="../../assets/download/download-title.png" alt="" />
				<div class="pt2">通过信息化工作进一步形成地质成果服务于城市规划、建设与管理</div>
			</div>
			<img class="download-zj" src="../../assets/download/download-zj.png" alt="" />
			<div class="download-eq">
				<!-- <img class="download-ios" @click="downloadIos" src="../../assets/download/download-ios.png" alt=""> -->
				<!-- <img class="download-android" src="../../assets/download/download-android.png" alt=""> -->
				<img class="download-windows" src="../../assets/download/download-windows.png" alt="">
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
export default {
	name: 'download',
	data() {
		return {};
	},
	created() {},
	methods: {
		downloadIos(){
			console.log(111111111);
		},
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	height: 65rem;
	.download {
		width: 100%;
		height: 65rem;
		background-image: url(../../assets/download/download-bgc.png);
		background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
		position: absolute; /* 不可缺少 */
	}
	.download-title {
		position: absolute;
		top: 26%;
		left: 20%;
	}
	.download-zj {
		width: 55rem;
		height: 32rem;
		position: absolute;
		top: 48%;
		left: 28%;
	}
	.download-eq{
		width: 28rem;
		position: absolute;
		top: 55%;
		left: 20%;
		.download-windows:hover{
			content: url(../../assets/download/download-windows2.png);
		}
	}
}
</style>
